<template>
  <!-- 分隔符 -->
  <view :style="inlineBox">
    <view :style="inlineStyle"></view>
  </view>
</template>

<script lang=ts>
  import {
    Component,
    Vue,
    Prop,
    Watch
  } from 'vue-property-decorator'


  interface ISeparator {
    /** 颜色 */
    borderColor: string;
    /** 边距 */
    hasMargin: boolean;
    /** 样式 solid dashed dotted */
    borderStyle: string;
  }


  @Component({})
  export default class Separator extends Vue {
    @Prop({
      type: Object
    })
    decoretionProperties: ISeparator
    @Watch("decoretionProperties")
    onPropUpdate() {
      this.formData = this.decoretionProperties
      this.getinlineBox();
      this.getinlineStyle();
    }

    formData: ISeparator = {} as ISeparator;
    /** 分隔符边框样式 */
    inlineBox: string = "";
    /** 分隔符线条样式 */
    inlineStyle: string = "";

    mounted() {
      this.formData = this.decoretionProperties
      this.getinlineBox();
      this.getinlineStyle();
    }

    /**
     * 分隔符边框样式
     */
    getinlineBox() {
      const {
        hasMargin
      } = this.formData;
      this.inlineBox = `box-sizing: 'border-box'; padding: 10px ${
        hasMargin ? 15 : 0
      }px;`
    }

    /**
     * 分隔符线条样式
     */
    getinlineStyle() {
      const {
        borderColor,
        borderStyle
      } = this.formData;
      this.inlineStyle = `border-bottom: 1px ${borderStyle} ${borderColor};`
    }
  }
</script>

<style></style>